<template>
  <div class="dynamic-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <div v-for="(item, index) in configArr" :key="index">
        <el-form-item :label="item.label" :prop="item.key">
          <el-input
            v-if="item.type === 'input' || item.type === 'input-number'"
            :type="item.extra.type"
            :value="form[item.key]"
            :placeholder="item.extra.placeholder"
            :disabled="item.extra.disabled ? item.extra.disabled : false"
            @input="handleInput(item.key, $event)"
          ></el-input>
          <el-select
            v-if="item.type === 'select'"
            :value="form[item.key]"
            :placeholder="item.extra.placeholder"
            :disabled="item.extra.disabled ? item.extra.disabled : false"
            ref="itemSelect"
            @change="handleSelectItemValue(item.key, $event)"
          >
            <el-option
              v-for="tig in item.extra.options"
              :key="tig.value"
              :label="tig.label"
              :value="tig.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item v-if="Object.keys(form).length > 0">
        <el-button type="primary" @click="handleSave">保存</el-button>
      </el-form-item>
      <div class="no-form" v-else>
        <span>暂无配置内容</span>
      </div>
    </el-form>
  </div>
</template>

<script>
// import { zhishuConfig, syncConfig } from "@/utils/config-type";
export default {
  name: "dynamic-form-mini",
  props: {},
  components: {},
  data() {
    // const configData = zhishuConfig;
    return {
      ConfigType: [],
      configArr: [],
      form: {},
      rules: {},
    };
  },
  methods: {
    giveFormData(form) {
      this.configArr = [];
      this.form = { ...form };
      // for (let key in this.form) {
      this.ConfigType.map((item) => {
        // if (item.key === key) {
        this.configArr.push(item);
        this.rules[item.key] = item.extra.rules;
        if (item.extra.defaultValue || item.extra.defaultValue === 0) {
          this.$set(this.form, item.key, item.extra.defaultValue);
        }
        // }
      });
      // }
    },
    getConfigType(config) {
      this.ConfigType = config;
    },
    handleInput(name, val) {
      this.$set(this.form, name, val);
    },
    handleSelectItemValue(name, val) {
      this.$set(this.form, name, val);
    },
    clearValidateForm() {
      this.$refs.form.clearValidate();
    },
    handleSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("handleSave", this.form);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/index.scss";
.no-form {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    font-size: 22px;
    font-weight: bold;
    color: $themeColor;
  }
}
</style>
